<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>站点登录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="../src/img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../src/css/bootstrap.css"/>
    <style rel="stylesheet">
        body {
            margin: 0px;
            padding: 0px;
        }

        #header {
            width: 100%;
            height: 800px;
            margin: 0px;
            position: relative;
            background-color: #ccc;
        }

        #logo {
            width: 200px;
            height: 80px;
            background-image: url(../src/img/login/logo.png);
            position: absolute;
            top: 60px;
            left: 60px;
            z-index: 1;
        }

        #login {
            width: 480px;
            /* padding: 10px;*/
            position: absolute;
            top: 200px;
            right: 100px;
        }

        #test {
            width: 100%;
            height: 900px;
            position: absolute;
            background-image: url(../src/img/login/slider-overlay.png);
        }

        .picture {
            padding: 0px;
        }

        #header .picture ul {
            margin: 0px;
            padding: 0px;
        }

        #header .picture ul li img {
            width: 100%;
            height: 900px;
        }

        #header .picture ul li {
            padding: 0px;
            display: none;
            position: absolute;
        }

        /* #header .picture ul .first { display: block; }*/

        #header .point {
            width: 50px;
            height: 15px;
            position: absolute;
            bottom: 30px;
            right: 200px;
            z-index: 1;
        }

        #header .point ul {
            padding: 0px;
            list-style: none;
            height: 20px;
        }

        #header .point ul li {
            float: left;
            width: 14px;
            height: 14px;
            background: url(../src/img/login/icons.png) -22px -125px;
        }

        #header .point ul li.cur {
            background-position: -10px -125px;
        }

        #footer {
            width: 100%;
            height: 50px;
            /*position: relative;*/
        }

        #footer p {
            line-height: 50px;
        }

    </style>
</head>

<body>
<div id="header" class="row">
    <div class="picture col-md-12">
        <ul class="row">
            <li class="first col-md-12"><a href="#"><img
                    src="../src/img/login/slide2.jpg"></a></li>
            <li class="col-md-12"><a href="#"><img
                    src="../src/img/login/slide1.jpg"></a></li>
            <li class="col-md-12"><a href="#"><img
                    src="../src/img/login/slide3.jpg"></a></li>
        </ul>
    </div>

    <div class="point">
        <ul>
            <li class="cur"></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div id="logo"></div>
    <div id="test"></div>

    <div id="login">

        <div class="panel panel-primary">
            <div class="panel-body text-center">
                <h3><strong>站点登录</strong></h3>
            </div>
            <div class="panel-footer">
                <form action="../login/cityLogin" method="post">
                    <div class="form-group">
                        <label for="exampleInputEmail1">账号</label>
                        <input type="text" name="empId" class="form-control" id="exampleInputEmail1" placeholder="请输入你的工号">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码！">
                    </div>

                    <div data-toggle="distpicker">
                        <label for="exampleInputPassword1">站点</label>
                        <div class="form-group">
                            <select class="form-control" name="province" id="province1"></select>
                        </div>
                        <div class="form-group">
                            <select class="form-control" name="city" id="city1"></select>
                        </div>
                        <div class="form-group">
                            <select class="form-control" name="district" id="district1"></select>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox" name="remember">记住密码</label>
                    </div>

                    <button type="submit" class="btn btn-primary form-control" style="margin-bottom: 20px;">登录</button>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <center>
        <p>Copyright &copy; 2017 RingSpace 版权所有| 翻版必究</p>
    </center>
</div>

<script src="../src/js/jquery-3.2.1.min.js "></script>
<script src="../src/js/bootstrap.min.js"></script>
<script src="../src/js/distpicker.data.js"></script>
<script src="../src/js/distpicker.js"></script>

<!-- 轮播图 -->
<script type="text/javascript">
    $(function () {
        var i = 0;
        var timer;
        $('.picture li').eq(0).show().siblings().hide();

        showTime();

        $('.point li').hover(function () {
            i = $(this).index();
            Show();
            clearInterval(timer);
        }, function () {
            showTime();
        });

        function showTime() {
            timer = setInterval(function () {
                Show();
                i++;
                if (i == 3) {
                    i = 0;
                }
            }, 4000);
        }

        function Show() {
            $('.picture li').eq(i).fadeIn(1000).siblings('.picture li')
                .fadeOut(1000);
            $(".point li").eq(i).addClass("cur").siblings().removeClass(
                "cur");
        }
    });

</script>


</body>

</html>
